<template>
  <view class="page-green">
    <!-- Content -->

    <view class="h-full flex items-center justify-center pt-10">
      <image class="h-10 w-10" src="/static/images/logo.png" mode="aspectFit" />
      <text class="ml-2 text-lg">
        西安旅游职业中等专业学校
      </text>
    </view>

    <view class="pt-5 text-center">
      <image class="sys-name" src="/static/images/sys-name.png" mode="aspectFit" />
    </view>

    <view class="relative h-56 w-full pt-5">
      <image class="h-full w-full" src="/static/images/banner-default.png" mode="aspectFit" />
    </view>

    <view class="pt-5 text-center">
      <view class="bg-title text-2xl">
        欢迎2025级新学生
      </view>
    </view>

    <view class="flex justify-between">
      <view class="flex-1 pl-4">
        <view class="bg-gradient mt-5 flex rounded-4 pt-2">
          <view class="text-2xl">
            <view class="ml-2 text-lg text-[#303030]">
              系统登录
            </view>
            <view class="ml-2 text-sm text-[#58647D]">
              一键智联，畅享校园服务
            </view>
            <view class="ml-2 mt-2 w-20 rounded-4 bg-white p-1 text-center text-sm text-[#000000]" @click="goLogin">
              去登录
            </view>
            <image class="h-25 w-25" src="/static/images/login.png" mode="aspectFit" />
          </view>
        </view>
      </view>
      <view class="flex-1 pl-4 pr-4">
        <view class="mt-5 flex rounded-4 bg-white pt-2">
          <view>
            <view class="ml-2 text-lg text-[#303030]">
              迎新指南
            </view>
            <view class="ml-2 text-sm text-[#58647D]">
              新生启航手册
            </view>
          </view>
          <image class="h-20 w-20" src="/static/images/book.png" mode="aspectFit" />
        </view>

        <view class="mt-5 flex rounded-4 bg-white pt-4">
          <view>
            <view class="ml-2 text-lg text-[#303030]">
              校园风光
            </view>
            <view class="ml-2 text-sm text-[#58647D]">
              菁菁学府画卷
            </view>
          </view>
          <image class="h-20 w-20" src="/static/images/tree.png" mode="aspectFit" />
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { reactive, ref } from 'vue';

const goLogin = () => {
  uni.redirectTo({
    url: '/pages/common/login/index',
  });
};
</script>

<style lang="scss">
  .sys-name{
    width: 80%;
    height:100px;
  }
 .bg-title{
    width: 80%;
    height:30px;
    background: url('@/static/images/title-bg.png') no-repeat center center fixed;
    background-size: cover;
  }
  .bg-gradient {
    background: linear-gradient(to right, #E7F6EA, #ffffff);
  }
</style>
